<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box">
		<view class="uni-global-title">
			店铺管理 / 店铺列表
		</view>
		<view class="">
			<view class="class-manage-top">
				<view class="">
					<search-input v-model="keyword" @onclick="onSearch" ></search-input>
				</view>
				<view class=""> 
					<u-button type="primary" size="mini" @click="goUrl('./add?total='+count)" >
						<text class="iconfont icon-shuliang-zengjia"></text>
						<text> &nbsp;新 增</text>
					</u-button>
				</view>
				
			</view>
			<u-table class="u-table-senior">
				<u-tr style="margin-right:15px;" class="sticky-table-th" >
					<u-th class="u-table-th " width="150px">店铺logo</u-th>
					<u-th class="u-table-th " width="200px">店铺标题</u-th>
					<u-th class="u-table-th " width="150px">
						<filter-th :location="filterClass" :value="1"  ></filter-th>
					</u-th>
					<u-th class="u-table-th " width="250px">店铺地址</u-th>
					<u-th class="u-table-th " width="150px">店铺状态</u-th>
					<u-th class="u-table-th " width="150px">店铺评分</u-th>
					<u-th class="u-table-th " width="350px">标签数组</u-th>
					<u-th class="u-table-th " width="150px">评价总数</u-th>
					<u-th class="u-table-th " width="150px">审核状态</u-th>
					<u-th class="u-table-th sticky-right sticky-shadow" style="right:210px" width="150px">创建时间</u-th>
					
					<u-th class="u-table-th sticky-right " width="210px">操作</u-th>
				</u-tr>
				<u-empty text="暂无内容" mode="data" v-if="nullData" ></u-empty>
				<loaders v-if="data==0 && !nullData"></loaders>
				<u-tr v-for="(item,index) in data" :key="index" class="u-table-tr">
					<u-td class="u-table-td" width="150px">
						<view class="flex-layout">
							<u-image width="40px" height="40px" :src="item.logo" @click="eventImage(item.logo)"></u-image>
						</view>
					</u-td>
					<u-td class="u-table-td "  width="200px">
						<heightText :textContetn="item.title" :textTitle="keyword" ></heightText>
					</u-td>
					<u-td class="u-table-td" width="150px">
						{{item.type.title }}
					</u-td>
					<u-td class="u-table-td" width="250px">
						{{item.area.address }}
					</u-td>
					<u-td class="u-table-td" width="150px">
						<text :class="!item.status.value ?'uni-color-success' : 'uni-color-error'">
							{{item.status.text }}
						</text>
					</u-td>
					<u-td class="u-table-td" width="150px">
						{{item.score.grade / 10 }}分
					</u-td>
					<u-td class="u-table-td" width="350px">
						<view style="">
							<view >
								<u-tag  v-for="item in item.label" :text="item" mode="plain" style="margin-right: 5px;"  /> 
							</view>
						</view>
					</u-td>
					
					<u-td class="u-table-td" width="150px">
						{{item.score.score_total}}条
					</u-td>
					<u-td class="u-table-td" width="150px">
						<view :style="`color:${onExamColor(item.examine_status.value)}`">
							{{item.examine_status.text}}
						</view>
					</u-td>
					<u-td class="u-table-td sticky-right sticky-shadow" style="right:210px" width="150px">
						<uni-dateformat :date="item.create_date"></uni-dateformat>
					</u-td>
					
					<u-td class="u-table-td sticky-right  " width="210px"  >
						<view class="u-table-td-util">
							<u-button size="mini" @click="goUrl('./update?uid='+item._id)" type="primary" >
								<text class="iconfont icon-xiugai"></text>
								<text>修改</text>
							</u-button>
							<u-button size="mini" @click="goUrl('./detail?uid='+item._id)" type="primary" >
								<text class="iconfont icon-chakan"></text>
								<text>详情</text>
							</u-button>
							<u-button size="mini" type="error" @click="removeData(item,index)" >
								<text class="iconfont icon-lajitong"></text>
								<text>删除</text>
							</u-button>
						</view>
				
					</u-td>
				</u-tr>
			</u-table>
			<view class="u-table-senior-pagination">
				<uni-pagination @change="enventPages" :total="count"></uni-pagination>
			</view>
		</view>


	</view>
	<u-toast ref="uToast" />
</template>

<script>
	const global = uniCloud.importObject("global",{customUI:true});
	const Shop = uniCloud.importObject("shop",{customUI:true});
	export default {
		data() {
			return {
				loading:false,
				nullData:false,
				data: [],
				where: {},
				// 分页
				limit:10,
				skip:0,
				count:0,
				keyword:'',// 关键词搜索
				filterClass:[
					 { value: 0, text: "篮球" },
					          { value: 1, text: "足球" },
					          { value: 2, text: "游泳" },
				]
			}
		},
		onLoad() {
			this.getData();
			this.getClassify();
		},
		methods: {
			getData() {
				this.nullData = false;
				const filed = "_id,title,logo,score,type,area,label,user_id,comment,order,technician,business_license,status,examine_status,create_date " ;
				global.getList('shop',this.where,"create_date desc",filed,this.skip,this.limit).then(result => {
					const data = result.data ;
					this.count = result.count;
					this.data = data;
					this.loading = false;
					if(  data.length==0 )return this.nullData = true;
				})
			},
			// 删除数据
			async removeData(item,index){
				const modal = await uni.showModal({title:"您确认删除吗?",content:"数据删除后不可回复,请慎重"}) ;
				if(!modal.confirm) return ;
				if(!item._id) return ;
				this.loading = true ;
				const userinfo = await global.getList('userinfo',{"shop._id":item._id },"_id asc","_id,name");
				if(userinfo.data.length != 0){
					this.loading = false ;
					return this.$refs.uToast.show({title:'当前店铺旗下已有技师',type: 'error',duration:1500,position:'top'})
				}
				const images = [item.logo?item.logo:'',item.business_license?item.business_license:'']; // 删除的图片
				const Delete = await Shop.deleteData(item._id ,images )
				if(Delete.code == 200){
					this.$refs.uToast.show({title:Delete.message,type: 'success',duration:1500,position:'top',
						callback:()=>{
							this.data.splice(index,1);
							this.loading = false;
						}
					})
				}
			},
			// 获取服务类型 
			getClassify(){
				global.getList('classify',{is_show:1,type:'shop'},"_id desc","title as text,is_show,_id,_id as value",0,999).then( result =>{
					this.filterClass = result.data;
				} )
			},
			// 搜索
			onSearch(){
				this.loading = true;
				const nameVal = this.keyword
				// 合并查询条件
				let MergeWhere = {};
				// 构建搜索条件
				let search = {
					$or: [
						{ 	'title': {$regex: '.*' + nameVal + '.*',$options: 'i'} 		}
					]
				};
				this.where = Object.assign(MergeWhere, search) ;
				this.getData();
			},
			// 分页
			enventPages(val){
				this.loading = true
				this.skip = ( val.current-1) * 10 ;
				this.getData()
			},
			goUrl(url){
				uni.navigateTo({url})
			},
			// 审核颜色
			onExamColor(val){
				switch (val){
					case 0: return '#8c8c8c'
						break;
					case 1: return '#4cd964'
						break;
					default: return '#ef5352'
						break;
				}
			},
			// 图片放大
			eventImage(image) {
				if(typeof image == 'string'){
					image = [image];
				}
				uni.previewImage({
					urls: image,
				});
			},
		}
	}
</script>

<style  scoped lang="scss" >
	
	.class-manage-top{
		display: flex;
		padding:5px 20px ;
		gap:20px;
		justify-content:flex-end;
	}
	@import url("/common/css/ui-table.scss");
</style>